import React, { Component } from 'react'
// 7.导入store
import store from './store/index'

import axios from 'axios'

import * as types  from './store/types'

export default class App extends Component {

  componentDidMount() {
    //fetch 是js里面的一个请求方法
    fetch('/banner/list').then(res => res.json()).then(res => {
      // console.log(res.data);
      //调用全局状态中的方法
      store.dispatch({ type: types.CHANGE_BANNER_LIST, payload: res.data })
    })

    axios.get('/pro/list').then(res => {
      store.dispatch({ type: types.CHANGE_PRO_LIST, payload: res.data.data })
    })

  }

  render() {
    console.log(store.getState());
    return (
      <div>
        App
        {/* 8.在组件中通过store.getState() 来获取全局状态 */}
        <h1>{store.getState().app.count}</h1>

        <button onClick={() => {
          store.dispatch({ type: types.ADD })
        }}>加1</button>

        <button onClick={() => {
          store.dispatch({ type: types.REDUCE })
        }}>减1</button>

        <button onClick={() => {
          store.dispatch({ type: types.ADDNUM, payload: 10 })
        }}>加10</button>

        <button onClick={() => {
          store.dispatch({ type: types.REDUCENUM, payload: 10 })
        }}>减10</button>

        {store.getState().pro.bannerList.map((item, index) => {
          return (<p key={index}>
            <img style={{ height: 100 }} src={item.img} alt="" />
          </p>)
        })}

        {store.getState().pro.proList.map((item=>{
          return(<p key={item.proid}>{item.proname}</p>)
        }))}

      </div>
    )
  }
}
